{% extends 'base.html' %}

{% block content %}
    <div class="m-12">
        <h1 class="text-4xl text-success mb-4">Contact Manager</h1>

        <button class="btn btn-primary mb-4" onclick="contact_modal.showModal()">Add New Contact</button>
        {% include 'partials/add-contact-modal.html' %}
        <label class="input input-bordered flex items-center gap-2 mb-2 w-full">
            <input
                    type="search"
                    class="grow"
                    placeholder="Search"
                    name="search"
                    {# 指定GET请求的地址 #}
                    hx-get="{% url 'contacts:search' %}"
                    {# 当input元素输入内容 键盘抬起的时候触发 GET查询 delay设置时间间隔 可以防止每键入一个按钮就查询一次 #}
                    hx-trigger="keyup delay:500ms"
                    {# GET查询返回的结果 传给指定的html 对应的id 传给html携带context可以动态渲染 #}
                    hx-target="#contacts-list"
                    {#  #}
                    {# 可以制作查询等待加载效果 指定id为 加载效果的id #}
                    hx-indicator="#spinner"
                    {# 触发请求前操作 指定id透明度降低 #}
                    hx-on::before-request="document.getElementById('contacts-list').style.opacity = 0.4;"
                    {# 请求后操作 制定id透明度恢复 #}
                    hx-on::after-request="document.getElementById('contacts-list').style.opacity = 1.0;"
            />
            <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <g
                        stroke-linejoin="round"
                        stroke-linecap="round"
                        stroke-width="2.5"
                        fill="none"
                        stroke="currentColor"
                >
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </g>
            </svg>
            {% include 'partials/spinner.html' %}
        </label>

        {% include 'partials/contact-list.html' %}
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.body.addEventListener('fail', () => {
                document.getElementById('contact_modal').showModal();
            });
            document.body.addEventListener('success', () => {
                let firstContactDiv = document.querySelector('.no-contact-row');
                if (firstContactDiv) {
                    firstContactDiv.remove();
                }
            })
        })
    </script>
{% endblock %}